<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 内嵌式JS -->
    <script>
      console.log("hello world!");
    </script>

    <!-- <script src="./02_hello.js"></script> -->
  </head>
  <!-- 
    摸我去百度
    摸我去派出所
    行内JS 内嵌JS 外部JS
   -->
  <body>
    <a href="http://www.baidu.com">摸我去百度</a>

    <!-- 行内插入脚本 -->
    <!-- BOM Browser Object Model浏览器对象模型 提供的一个弹窗API -->
    <a href="javascript:alert('开门，您涉嫌滥用咸猪手');">摸我去派出所</a>

    <!-- 内嵌式JS -->
    <script>
      console.log("师姐你好");
    </script>

    <!-- 无法获取id为btn的元素 因为该元素还未渲染 -->
    <!-- <script>
      // 点击id为btn的元素时 调用function中的处理逻辑
      document.getElementById("btn").onclick = function () {
        window.alert("雪山文化看守所欢迎您!");
      };
    </script> -->

    <button id="btn">摸我看守所一日游</button>

    <script>
        // 点击id为btn的元素时 调用function中的处理逻辑
        document.getElementById("btn").onclick = function(){
            window.alert("雪山文化看守所欢迎您!")
        }
    </script>

    <button id="btn2">发布求救信息</button>

    <!-- 引入外部JS 注意：要操作的DOM元素必须已经渲染完毕 -->
    <script src="./02_hello.js"></script>
  </body>
</html>
